<template>
	<view class="container">
		<text class="title">注册</text>
		
		<uni-forms class="form" @submit="handleSubmit">  
			<uni-forms-item label="昵称">  
				<uni-easyinput v-model="nickName" type="text" placeholder="请输入昵称" />
			</uni-forms-item>  
		
			<uni-forms-item label="手机号">  
				<uni-easyinput v-model="phone" type="number" placeholder="请输入手机号" />
			</uni-forms-item>  
			
			<uni-forms-item label="密码">  
				<uni-easyinput v-model="password" type="password" placeholder="请输入密码" />
			</uni-forms-item>  
			
			<uni-forms-item label="确认密码">  
				<uni-easyinput v-model="confirmPassword" type="password" placeholder="请再次输入密码" /> 
			</uni-forms-item>  
			
			<view class="btn-wrap">  
				<button form-type="submit" @tap="handleRegister" type="primary">注册</button>  
			</view>  
		</uni-forms>  
	</view>
</template>
  
<script>  
export default {  
	data() {  
		return {  
			nickName: '',
			phone: '',
			password: '',
			confirmPassword: ''
		};  
	},
	methods: {
	    handleRegister() {  
			// 验证手机号、密码和确认密码是否填写正确  
			if (!this.nickName || !this.phone || !this.password || this.password !== this.confirmPassword) {
				uni.showToast({
					title: '昵称、手机号、密码或确认密码不能为空，且密码必须一致',
					icon: 'none'
				});
				return; // 验证失败，直接返回，不执行后续代码
			}
			// 如果验证通过，可以发起注册请求
			uni.request({
				url: 'http://localhost:8090/api/users/save',
				method: 'POST',
				data: {
					nickName: this.nickName,
					phone: this.phone,
					password: this.password
				},
				success: (res) => {
					// 请求成功的处理逻辑
					if (res.statusCode === 200){
						uni.showToast({  
							title: '注册成功',  
							icon: 'success',
							duration: 2000,
							complete: () => {
								setTimeout(() => {
									uni.redirectTo({
										url: '/pages/version1/log_on_v1'
									});
								}, 2000); // Wait for the toast to finish before redirecting
							}
						});
					} else{
						uni.showToast({
							title: '注册失败，请重试',
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					// 请求失败的处理逻辑
					console.error('注册失败：', err);
					uni.showToast({
						title: '注册失败，请重试',
						icon: 'none'
					});
				}
			});
		}
	}
};  
</script>  
  
<style scoped>
.container {
	display: flex;
	flex-direction: column;  
	height: 100%; /* 将容器高度设置为视口高度 */  
	margin: 3rpx 3rpx 3rpx 3rpx;
	padding: 0 20px; /* 这里设置容器的左右内边距 */
	justify-content: center; /* 可选：居中对齐 */
	align-items: center; /* 可选：垂直居中对齐 */
}  

.title {
	text-align: center;
	font-size: 36px;  
	margin-top: 100rpx;
	margin-bottom: 200rpx; 
}
 .form {
	width: 100%; /* 或者指定一个固定的宽度，如：width: 300px; */
	max-width: 600px; /* 可选：限制表单的最大宽度 */
	padding: 20px; /* 可以为表单内容添加内部填充 */
	background-color: #fff; /* 可选：设置表单背景颜色 */
	border-radius: 8px; /* 可选：圆角边框 */
	// box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* 可选：阴影效果 */
 } 
.btn-wrap {  
    margin-top: 20rpx;  
}  
</style>